<html>
<head>
    <!-----Meta----->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Online Taki login Form</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Taki" />
    <meta name="keywords" content="login form, psd, html, css3, tutorial" />
    <meta name="M&M" content="Miki Mook" />

    <link rel="icon" type="image/x-icon" href="images/favicon.ico" >
    <!--Stylesheets-->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="fonts/pacifico/stylesheet.css" rel="stylesheet" type="text/css" />
    <script>
        function login_validate()
        {
            var username = document.forms[0].elements[0];
            var password = document.forms[0].elements[1];
            var nickname = document.forms[0].elements[2];
            if(username.value  == "")
            {
                alert( "Please fill in your username");
                return false;
            }
            if(password.value  == "")
            {
                alert( "Please fill in your password");
                return false;
            }
            if(nickname.value  == "")
            {
                alert( "Please fill in your nickname");
                return false;
            }
            if(password.value.length<5)
            {
                alert( "Please, Write a longer password (minimum 5 chars)");
                return false;
            }
            var event = window.event;
            var target = event.target||event.srcElement;
            if(target.value=="Submit")
            {
                document.forms[0].submit();
            }

            return true;
        }
    </script>
</head>
<body>

<div class="heading">
    Online TAKI game
</div>

<div id="wrapper">


    <!--login form inputs-->
    <form name="login-form" class="login-form" action="Login.php"  method="post" ">

        <!--Header-->
        <div class="header">
            <h1>Login Form</h1>
            <span>Please login by using this beautiful login form or if you dont have an account, you can Register!</span>
        </div>
        <!--END header-->

        <!--Input fields-->
        <div class="content">
            <!--USERNAME-->
            <label>
                <input name="username" type="text" class="input username" placeholder="Username"/>
            </label>
            <!--END USERNAME-->
            <!--PASSWORD-->
            <label>
                <input name="password" type="password" class="input password" placeholder="Password"/>
            </label>
            <!--END PASSWORD-->
            <!--NICKNAME-->
            <label>
                <input name="nickname" type="text" class="input nickname" placeholder="Nickname"/>
            </label>
            <!--END PASSWORD-->
        </div>
        <!--END Input fields-->

        <!--Buttons-->
        <div class="footer">
            <!--Login button--><input type="submit" name="submit" value="Submit" class="button" onclick="return login_validate();" > <!--END Login button-->
            <!--Register button--><input type="submit" name="submit" value="Register" class="register" onclick="return login_validate();"><!--END Register button-->
        </div>
        <!--END Buttons-->
        <a href ="../Taki/Takiimages/Instructions/taki_he.pdf" style="text-decoration: none;" target="new">
         <p align="center"><img src="TakiImages/Instructions/Taki_Cards_Game_Logo.png" width="250" height="120" border="0" style="margin: 5px 4px 4px 4px;">
         </p></a>
    </form>
    <!--end login form-->

</div>
</body>
</html>